<template>
  <view class="home">
    <image class="bgImage" :src="IMAGES.HOME_BG"></image>
    <!-- 推荐比赛 -->
    <match-banner
      v-if="lives && lives[0]"
      @event-click="go('/pages/video/index?roomId=' + lives[0].id)"
      :gameLogo="lives[0].gameIcon"
      :teamALogo="lives[0].teamAIcon"
      :teamBLogo="lives[0].teamBIcon"
      :teamAName="lives[0].teamAName"
      :teamBName="lives[0].teamBName"
      :matchTime="lives[0].beginTime"
      :teamAScore="lives[0].teamAScore"
      :teamBScore="lives[0].teamBScore"
    ></match-banner>
    <!-- 跑马灯 -->
    <view class="notices" v-if="STATE.socket.notices">
      <uni-notice-bar
        :background-color="STATE.socket.notices.bgcolor"
        :color="STATE.socket.notices.color"
        :show-icon="true"
        :scrollable="true"
        :speed="STATE.socket.notices.speed"
        :single="true"
        :text="STATE.socket.notices.content.join('#')"
      />
    </view>
    <!-- 模块 -->
    <view class="modules"><modules width="640rpx"></modules></view>

    <matches title="热门" :title-icon="IMAGES.ICON_HOT" :list="liveshift"></matches>
    <matches title="关注比赛" :list="followMatchs"></matches>

    <view style="margin-bottom: 100rpx;"></view>
  </view>
</template>
<script>
import { IMAGES } from "@/config/resources";
import matchBanner from "./components/matchBanner";
import uniNoticeBar from "@/vender/uni-ui/components/uni-notice-bar/uni-notice-bar";
import modules from "./components/modules";
import matches from "./components/matches";
import tabMixin from "../tabMixin";
import video from "@/api/modules/video";
export default {
  mixins: [tabMixin],
  components: {
    matchBanner,
    uniNoticeBar,
    modules,
    matches
  },
  data() {
    return {
      matchIndex: 0,
      lives: [], // 直播列表
      followMatchs: [] //关注的比赛
    };
  },
  created() {
    if (process.env.NODE_ENV !== "development" && !this.$store.state.user.isLogin) {
      uni.navigateTo({ url: "/pages/common/login" });
    }
  },
  computed: {
    IMAGES: () => IMAGES,
    liveshift() {
      let lives = JSON.parse(JSON.stringify(this.lives));
      lives.shift();
      return lives;
    }
  },
  mounted() {
    this.init();
  },
  onPullDownRefresh() {
    this.init().then(() => {
      uni.stopPullDownRefresh();
    });
  },
  onShow(){
    if (!this.$store.state.user.isLogin) return Promise.reject(false);
    return video.getFollowMatch().then(_ => {
      this.followMatchs = _.data.data;
      return _.data.data;
    });
  },
  methods: {
    init() {
      return video.getHotLives().then(_ => {
        this.lives = _.data.data;
        return _.data.data;
      });
    },
    getFollowMatches() {
      if (!this.$store.state.user.isLogin) return Promise.reject(false);
      return video.getFollowMatch().then(_ => {
        this.followMatchs = _.data.data;
        return _.data.data;
      });
    },
    onClickMatches(index) {
      this.matchIndex = index;
    }
  }
};
</script>
<style lang="scss">
.home {
  position: relative;
  width: 750rpx;
  background-color: #ffffff;
  padding-top: 310rpx;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
}

.bgImage {
  position: absolute;
  top: 0;
  width: 750rpx;
  height: 503rpx;
  z-index: 0;
}

.modules {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
}

.notices {
  width: 640rpx;
  // margin: 0 auto;
  margin-top: 20rpx;
  overflow: hidden;
}
</style>
